<script setup lang="ts">
  import { ref, onMounted, createVNode } from 'vue';
  import dayjs from 'dayjs';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { GetWithdrawalListApi, GetBankListApi, WithdrawalCancelApi } from '@/api/finance';
  import WithdrawalModal from './modal/Withdrawal.vue';
  import InfoModal from './modal/InfoModal.vue';
  import { useModal } from '@/components/Modal';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { Modal, message } from 'ant-design-vue';

  const info = ref({});
  const bankList = ref([]);
  const typeText = ref(['微信', '支付宝', '银行卡', 'USDT-TRC20']);
  const statusText = ref(['等待审核', '审核中', '审核成功', '审核失败', '取消提现']);
  const statusColor = ref(['#a64141', '#0014b7', 'success', '#c5904b', '']);
  onMounted(async () => {
    const data = await GetBankListApi();
    bankList.value = data.list;
  });

  const getBankName = (id) => {
    return bankList.value[id];
  };

  const [registerModal, { openModal }] = useModal();
  const [registerInfoModal, { openModal: openInfoModal, closeModal }] = useModal();

  const [registerTable, { getRawDataSource, reload }] = useTable({
    title: '提现管理',
    canResize: true,
    columns: [
      {
        title: '提现单号',
        dataIndex: 'orderNo',
        resizable: true,
      },
      {
        title: '提现类型',
        dataIndex: 'type',
        resizable: true,
      },
      {
        title: '订单金额',
        dataIndex: 'amount',
        resizable: true,
      },
      {
        title: 'USDT金额',
        dataIndex: 'USDT',
        resizable: true,
      },
      {
        title: '提现姓名',
        dataIndex: 'name',
        resizable: true,
      },
      {
        title: '提现账号/USDT币址',
        dataIndex: 'card',
        resizable: true,
      },
      {
        title: '提现状态',
        dataIndex: 'status',
        resizable: true,
      },
      {
        title: '手续费/扣除',
        dataIndex: 'free',
        resizable: true,
      },
      {
        title: '备注信息',
        dataIndex: 'userRemark',
        resizable: true,
      },
      {
        title: '二维码',
        dataIndex: 'qrcode',
        resizable: true,
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
        resizable: true,
      },
      {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
      },
    ],
    bordered: true,
    showSelectionBar: false,
    showTableSetting: true,
    accordion: true, // 手风琴效果
    api: GetWithdrawalListApi,
    fetchSetting: {
      listField: 'list',
    },
    afterFetch: () => {
      const data = getRawDataSource();
      info.value = data;
    },
    useSearchForm: true,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'status',
          label: '提现状态',
          component: 'Select',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              {
                value: 0,
                label: '等待审核',
              },
              {
                value: 1,
                label: '审核中',
              },
              {
                value: 2,
                label: '审核成功',
              },
              {
                value: 3,
                label: '审核失败',
              },
              {
                value: 4,
                label: '取消提现',
              },
            ],
          },
        },
        {
          field: 'remark',
          label: '收款信息',
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
        {
          field: 'orderNo',
          label: '提现单号',
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
        {
          field: 'type',
          label: '提现类型',
          component: 'Select',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              {
                value: 0,
                label: '微信',
              },
              {
                value: 1,
                label: '支付宝',
              },
              {
                value: 2,
                label: '银行卡',
              },
              {
                value: 3,
                label: 'USDT-TRC20',
              },
            ],
          },
        },
      ],
    },
    rowKey: 'id',
    takeCare: '这是注意事项',
  });

  function refreshTable() {
    setTimeout(() => {
      reload();
    }, 500);
  }

  const handleEdit = (record) => {
    console.log(record);
  };

  const handleDel = (record) => {
    console.log(record);
    Modal.confirm({
      title: '温馨提示',
      icon: createVNode(ExclamationCircleOutlined),
      content: '您是否要取消“提现申请”订单',
      onOk() {
        WithdrawalCancelApi(record.id).then(() => {
          message.success('取消提现成功');
          refreshTable();
          return true;
        });
      },
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      onCancel() {},
    });
  };
</script>
<template>
  <main>
    <a-row :gutter="16">
      <a-col :span="24">
        <BasicTable @register="registerTable">
          <template #toolbar>
            <a-button type="primary" size="small" @click="openModal(true)">申请提现</a-button>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'create_time'">
              {{ dayjs(record.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-if="column.key === 'update_time'">
              {{ dayjs(record.update_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-if="column.key === 'type'">{{ typeText[record.getTemId.type] }}</template>
            <template v-if="column.key === 'name'">{{ record.getTemId.name }}</template>
            <template v-if="column.key === 'card'">{{ record.getTemId.card }}</template>
            <template v-if="column.key === 'free'">
              ({{ (record.free / record.money).toFixed(2) * 100 }}%) {{ record.free }}</template
            >
            <template v-if="column.key === 'qrcode'">
              <a-qrcode :src="record.qrcode" size="120" />
            </template>
            <template v-if="column.key === 'status'">
              <a-tag :style="{ color: statusColor[record.status] }">{{
                statusText[record.status]
              }}</a-tag>
            </template>
            <template v-if="column.key === 'bankId'">
              {{ getBankName(record.bankId) }}
            </template>
            <template v-if="column.key === 'action'">
              <TableAction
                :actions="[
                  {
                    label: '修改',
                    type: 'default',
                    onClick: handleEdit.bind(null, record),
                    ifShow: record.status == 0,
                  },
                  {
                    label: '取消',
                    type: 'primary',
                    onClick: handleDel.bind(null, record),
                    ifShow: record.status == 0,
                  },
                  {
                    label: '提现详情',
                    type: 'primary',
                    onClick: () => openInfoModal(true, record),
                    ifShow: record.status != 0,
                  },
                ]"
              />
            </template>
          </template>
        </BasicTable>
      </a-col>
    </a-row>

    <WithdrawalModal @register="registerModal" @ok="refreshTable" />
    <InfoModal @register="registerInfoModal" @ok="closeModal" />
  </main>
</template>
